<template>
    <view class="function-menu">
      <view 
        class="menu-item" 
        v-for="(item, index) in menuList" 
        :key="index"
        @tap="handleMenuClick(item)"
      >
        <view class="left">
          <view class="left-icon">
          <image :class="item.iconName" :src="commonStore.baseImageUrl+ item.icon" >
          </image>
        </view>
          <text>{{ item.name }}</text>
        </view>
        <image class="arrow-right" :src="commonStore.baseImageUrl+ 'test-yujia/mine/nav-arrow-right.png'">
          
        </image>
      </view>
    </view>
  </template>
  
  <script setup>
  import { useCommonStore } from '@/store';

const commonStore = useCommonStore()
  const menuList = [
    { name: '邀请好友', iconName: 'yaoqing-icon',icon: 'test-yujia/mine/yaoqing.png', url: '/pages/subpackages/activity/invited-user' ,type:'invite'},
    { name: '充值中心', iconName: 'duihuan-icon',icon: 'test-yujia/mine/yaoqing.png', url: '/pages/subpackages/mineCenter/recharge' ,type:'recharge'},
    // { name: '兑换中心', iconName: 'duihuan-icon',icon: 'test-yujia/mine/yaoqing.png', url: '/pages/exchange/index' ,type:'exchange'},
    { name: '我的课程', iconName: 'kecheng-icon',icon: 'test-yujia/mine/kecheng.png', url: '/pages/subpackages/mineCenter/mine-course' ,type:'course'},
    { name: '联系我们', iconName: 'lianxi-icon',icon: 'test-yujia/mine/lianxiwomen.png', url: '/pages/subpackages/mineCenter/recharge' ,type:'contact'},
    { name: '我的钱包', iconName: 'qianbao-icon',icon: 'test-yujia/mine/qianbao.png', url: '/pages/contact/index' ,type:'wallet'}
  ]
  
  const handleMenuClick = (item) => {
    if(item.type === 'exchange'){
      commonStore.showCommonSoon()
    }else if(item.type === 'course'){
      uni.navigateTo({ url: item.url })
    }else if(item.type === 'contact'){
      commonStore.showCommonSoon()
    }else{
      uni.navigateTo({ url: item.url })
    }
  }
  </script>
  
  <style lang="scss">
  .function-menu {
    background: #fff;
    border-radius: 12rpx;
    padding: 12rpx 20rpx;
    margin-top: 16rpx;
  
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
  
      &:last-child {
        border-bottom: none;
      }
  
      .left {
        display: flex;
        align-items: center;
        gap: 20rpx;
        font-size: 30rpx;
        color: #666666;
  
        .left-icon {
          width: 50rpx;
          height: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          image{
            width: 100%;
            height: 100%;
            &.yaoqing-icon{
              width: 41rpx;
              height: 33rpx;
            }
            &.duihuan-icon{
              width: 41rpx;
              height: 34rpx;
            }
            &.kecheng-icon{
              width: 33rpx;
              height: 39rpx;
            }
            &.lianxi-icon{
              width: 37rpx;
              height: 37rpx;
            }
            &.qianbao-icon{
              width: 39rpx;
              height: 32rpx;
            }
          }
        }
      }
      .arrow-right{
        width: 23rpx;
        height: 23rpx;
      }
    }
  }
  </style>